<script setup lang="ts">
import {onMounted, ref} from 'vue'
import { useRouter } from 'vue-router'
import axios from "axios";

const router = useRouter()


const localhost = "http://localhost:8511/users/"
const UpdateEnergyValue = () => {
  axios.post(localhost+"UpdateenergyValue?id="+userInfo.value.userId+"&energyValue="+userInfo.value.energyValue).then(res=>{
    userInfo.value = res.data.data;
    renewalUsers();
  })
}

const renewalUsers = () => {// 更新页面的usersinfo数据
  sessionStorage.setItem("users", JSON.stringify(userInfo.value));
  const usersData = sessionStorage.getItem('users');
  if (usersData) {
    userInfo.value = JSON.parse(usersData);
  }
}


const energyInfo = ref({
  records: [
    {
      type: 'daily_checkin',
      title: '每日签到',
      time: '2023-09-16 12:00',
      amount: 1
    },
    {
      type: 'daily_login',
      title: '每日登录',
      time: '2023-09-16 12:00',
      amount: 1
    },
    {
      type: 'invite_friend',
      title: '邀请好友 (188****6666)',
      time: '2023-09-15 12:00',
      amount: 10
    },
    {
      type: 'ai_purchase',
      title: 'AI购买',
      time: '2023-09-14 12:00',
      amount: -1
    }
  ]
})

const energyIn = ref({
  energyValue: ''
});

const userInfo = ref({
  name: '',
  avatar: '',
  description: '',
  stats: {
    follows: 123,
    likeCount: 123,
    shareCount: '1.2万',
    energy: 123,
  },
});

const getUsers = () => {
  const usersData = sessionStorage.getItem('users');
  if (usersData) {
    userInfo.value = JSON.parse(usersData);
    console.log('用户信息:', userInfo.value.energyValue);
  } else {
    // userInfo.value = {
    //   name: '默认用户',
    //   avatar: '/images/default-avatar.jpg',
    //   description: '暂无描述',
    //   energyValue: '9999',
    // };
  }
}
const huesfe = () => {
  sessionStorage.setItem('users', JSON.stringify(userInfo.value));
  const usersData = sessionStorage.getItem('users');
  if (usersData) {
    userInfo.value = JSON.parse(usersData);
    console.log('用户信息:', userInfo.value.energyValue);
  } else {}
  axios.post('')
}

const tasks = ref([
  {
    id: 1,
    icon: 'home',
    title: '每日登录',
    description: '每日登录赠送 1点 能量',
    status: 'done',
    buttonText: '已登录'
  },
  {
    id: 2,
    icon: 'calendar',
    title: '每日签到',
    description: '每日签到赠送 1点 能量',
    status: 'todo',
    buttonText: '签到'
  },
  {
    id: 3,
    icon: 'share',
    title: '邀请好友',
    description: '每邀请1位好友赠送 10点 能量',
    status: 'todo',
    buttonText: '去邀请'
  }
])

const goBack = () => {
  router.back()
}

const handleTask = (task: any) => {
  if (task.status === 'todo') {
    // 处理任务
    console.log('执行任务:', task.title);
    if (task.title === '每日签到') {
      task.status = 'done';
      task.buttonText = '已签到';

      // 增加能量值
      userInfo.value.energyValue += 1;
      UpdateEnergyValue()
      // 更新任务列表
      tasks.value = [...tasks.value];
    }
  }
}
onMounted(async () => {
  getUsers();
});
</script>

<template>
  <div class="energy-page">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <div class="back-btn" @click="goBack">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
        </svg>
      </div>
      <div class="title">能量</div>
      <div class="placeholder"></div>
    </div>

    <!-- 能量信息 -->
    <div class="energy-info">
      <div class="energy-header">
        <div class="label">我的能量</div>
        <div class="amount">
          <svg class="fire-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="#007AFF" d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/>
          </svg>
          {{ userInfo.energyValue }}
        </div>
        <div class="rules-link" @click="router.push('/energy/rules')">
          <svg class="question-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="#999" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
          </svg>
          规则说明
        </div>
      </div>
    </div>

    <!-- 任务中心 -->
    <div class="section-title">任务中心</div>
    <div class="task-list">
      <div
        v-for="task in tasks"
        :key="task.id"
        class="task-item"
      >
        <div class="task-icon" :class="task.icon">
          <svg v-if="task.icon === 'home'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="#007AFF" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
          </svg>
          <svg v-if="task.icon === 'calendar'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="#007AFF" d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/>
          </svg>
          <svg v-if="task.icon === 'share'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="#007AFF" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z"/>
          </svg>
        </div>
        <div class="task-info">
          <div class="task-title">{{ task.title }}</div>
          <div class="task-description">{{ task.description }}</div>
        </div>
        <button
          class="task-button"
          :class="{ done: task.status === 'done' }"
          @click="handleTask(task)"
        >
          {{ task.buttonText }}
        </button>
      </div>
    </div>

    <!-- 能量记录 -->
    <div class="section-title">能量记录</div>
    <div class="record-list">
      <div
        v-for="(record, index) in energyInfo.records"
        :key="index"
        class="record-item"
      >
        <div class="record-info">
          <div class="record-title">{{ record.title }}</div>
          <div class="record-time">{{ record.time }}</div>
        </div>
        <div
          class="record-amount"
          :class="{ negative: record.amount < 0 }"
        >
          {{ record.amount > 0 ? '+' : '' }}{{ record.amount }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.energy-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-top: env(safe-area-inset-top);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: linear-gradient(90deg, #f5a8f0 0%, #7ecfff 100%);
  color: white;
}

.back-btn {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.title {
  font-size: 17px;
  font-weight: 500;
}

.placeholder {
  width: 24px;
}

.energy-info {
  background: white;
  padding: 16px;
  margin-bottom: 12px;
}

.label {
  font-size: 14px;
  color: #666;
}

.amount {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-top: 4px;
}

.fire-icon {
  width: 24px;
  height: 24px;
}

.section-title {
  font-size: 15px;
  color: #333;
  margin: 16px;
  font-weight: 500;
}

.task-list {
  background: white;
  padding: 0 16px;
}

.task-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f5f5f5;
}

.task-item:last-child {
  border-bottom: none;
}

.task-icon {
  width: 40px;
  height: 40px;
  background: rgba(0, 122, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.task-icon svg {
  width: 24px;
  height: 24px;
}

.task-info {
  flex: 1;
}

.task-title {
  font-size: 15px;
  color: #333;
  margin-bottom: 4px;
}

.task-description {
  font-size: 12px;
  color: #999;
}

.task-button {
  padding: 6px 16px;
  border-radius: 16px;
  font-size: 13px;
  border: none;
  background: #007AFF;
  color: white;
  cursor: pointer;
}

.task-button.done {
  background: #e5e5e5;
  color: #999;
  cursor: default;
}

.record-list {
  background: white;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f5f5f5;
}

.record-item:last-child {
  border-bottom: none;
}

.record-title {
  font-size: 15px;
  color: #333;
  margin-bottom: 4px;
}

.record-time {
  font-size: 12px;
  color: #999;
}

.record-amount {
  font-size: 15px;
  color: #007AFF;
  font-weight: 500;
}

.record-amount.negative {
  color: #ff3b30;
}

.energy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rules-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #999;
  font-size: 13px;
  cursor: pointer;
}

.question-icon {
  width: 16px;
  height: 16px;
}

.rules-link:active {
  opacity: 0.7;
}
</style>